<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./src/react.js"></script>
    <script src="./src/react-dom.js"></script>
    <script src="./src/babel.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script type="text/babel">

    class Title extends React.Component{
    constructor(){
        super();
        this.state={
            falg:false,
            name:'admin',
            age:123456,
            editID:0,
            list:[{name:'11',age:'20',id:1},
        {name:'22',age:'22',id:+new Date()}]
           
        }

    }
    changeinp=(event)=>{
   
        this.setState({
            [event.target.name]:event.target.value
        })

    }
    btn=()=>{
        let obj ={name:this.state.name,age:this.state.age,id:+new Date()}
        let list=JSON.parse(JSON.stringify(this.state.list))
        list.push(obj)
        this.setState({
            list:list
        })
     
    }
    del=(id)=>{
        console.log(id);
        // let list = JSON.parse(JSON.stringify(this.state.list))
       let index= this.state.list.findIndex(item=>item.id==id)
       console.log(index);
       this.state.list.splice(index,1)
       this.setState({
           list:this.state.list
       })
    }
    // 修改
    edits(id,i){
    //    第一种方法
        // this.state.name=this.state.list[i].name
        // this.state.age=this.state.list[i].age
        // this.state.editID=id
        // this.setState({
        //     list:this.state.list
        // })

        // 第二种方法
        let list =  JSON.parse( JSON.stringify(this.state.list));

        // find查找到整行信息
                let obj = list.find(v=>v.id == id);
                this.setState({
                    name:obj.name,
                    age:obj.age,
                    editID:obj.id,
                    flag:false
                })
       
    }
    // 确认修改
    edit=()=>{
        console.log(this.state.editID);
        let list =JSON.parse(JSON.stringify(this.state.list))

        // 查找到本行的下标
        let index = list.findIndex(item=>item.id==this.state.editID)
        list[index].name=this.state.name,
        list[index].age=this.state.age,
        this.setState({
          list:list
        })
    }
    render(){
        let {name,falg,age}= this.state
      
        return(
            <div>
                <input type="text" value={name} name="name"  onChange={this.changeinp}/>
                <input type="text" value={age} name="age" onChange={this.changeinp} />
               <input type="button" value="提交" onClick={this.btn}/>
               <input type="button" value="确认修改" onClick={this.edit}/>
               <table border='1'>
                <thead>
                   <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th></tr>
                </thead>
              
                <tbody>
                   {
                    this.state.list.length>0?this.state.list.map((item,i)=>{
                        return <tr key={item.id}>
                            <td>{item.id}</td>
                        <td>{item.name}</td>
                        <td>{item.age}</td>
                        <td><button onClick={()=>this.del(item.id)}>删除</button>
                            <button onClick={()=>this.edits(item.id,i)}>修改</button>
                        </td>
                    </tr>
                    }):<tr><th>暂无数据</th></tr>
                   }
                    
                </tbody>
                </table>
            </div>
        )
    }
}
ReactDOM.render(
    <div>
        <Title></Title></div>,
    document.getElementById('app')
)

</script>

</html>